<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Foundation -->
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/foundation.min.css" />
<script src="js/vendor/custom.modernizr.js"></script>
<title>Insert title here</title>
</head>
<body>
	<!-- Foundation example -->
	<div class="row">
		<div class="large-12 columns">
			<h2>Welcome to Foundation</h2>
			<p>This is version 4.3.2.</p>
			<hr />
		</div>
	</div>
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>
	<div class="row">
		<div class="large-8 columns">
			<h3>The Grid</h3>

			<!-- Grid Example -->
			<div class="row">
				<div class="large-12 columns">
					<div class="panel">
						<p>This is a twelve column section in a row. Each of these
							includes a div.panel element so you can see where the columns are
							- it's not required at all for the grid.</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="large-6 columns">
					<div class="panel">
						<p>Six columns</p>
					</div>
				</div>
				<div class="large-6 columns">
					<div class="panel">
						<p>Six columns</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="large-4 columns">
					<div class="panel">
						<p>Four columns</p>
					</div>
				</div>
				<div class="large-4 columns">
					<div class="panel">
						<p>Four columns</p>
					</div>
				</div>
				<div class="large-4 columns">
					<div class="panel">
						<p>Four columns</p>
					</div>
				</div>
			</div>

			<h3>Buttons</h3>

			<div class="row">
				<div class="large-6 columns">
					<p>
						<a href="#" class="small button" data-reveal-id="myModal">Small Button modal</a>
					</p>
					<p>
						<a href="#" class="button">Medium Button</a>
					</p>
					<p>
						<a href="#" class="large button">Large Button</a>
					</p>
				</div>
				<div class="large-6 columns">
					<p>
						<a href="#" class="small alert button">Small Alert Button</a>
					</p>
					<p>
						<a href="#" class="success button">Medium Success Button</a>
					</p>
					<p>
						<a href="#" class="large secondary button">Large Secondary
							Button</a>
					</p>
				</div>
			</div>
		</div>

		<div class="large-4 columns">
			<h4>Getting Started</h4>
			<p>We're stoked you want to try Foundation! To get going, this
				file (index.html) includes some basic styles you can modify, play
				around with, or totally destroy to get going.</p>

			<h4>Other Resources</h4>
			<p>Once you've exhausted the fun in this document, you should
				check out:</p>
			<ul class="disc">
				<li><a href="http://foundation.zurb.com/docs">Foundation
						Documentation</a><br />Everything you need to know about using the
					framework.</li>
				<li><a href="http://github.com/zurb/foundation">Foundation
						on Github</a><br />Latest code, issue reports, feature requests and
					more.</li>
				<li><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping
					us on Twitter if you have questions. If you build something with
					this we'd love to see it (and send you a totally boss sticker).</li>
			</ul>
		</div>
	</div>

	<script>
		document.write('<script src='
				+ ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery')
				+ '.js><\/script>');
	</script>

	<script src="js/foundation.min.js"></script>
	<script>
		$(document).foundation();
	</script>
</body>
</html>